<template>
  <layout>
    <Tabs class-prefix="type" :data-source="typeList" :value.sync="type"/>
    <ol>
      <li v-for="(group,index) in groupedList()" :key="index">
        <h3 class="title">{{ beautify(group.title) }} <span>共￥{{group.total}}</span></h3>
        <ol>
          <li class="record" v-for="item in group.items" :key="item.id">
            <span >{{ tagString(item.tags) }}</span>
            <span class="notes">{{ item.notes }}</span>
            <span>￥{{ item.amount }} </span>
          </li>
        </ol>
      </li>
    </ol>
  </layout>
</template>

<script lang="ts">
import Vue from "vue";
import {Component} from "vue-property-decorator";
import Tabs from "@/components/Tabs.vue";
import recordListModel from "@/models/recordListModel";
import dayjs from "dayjs";
import clone from "@/lib/clone";

@Component({
  components: {Tabs},
})
export default class Statistics extends Vue {
  data = recordListModel.fetch();
  type = "-";
  tagString(tags:Tag[]){
    return tags.length===0?'无':tags.map(t=>t.name).join('，')
  }
  typeList = [
    {text: "支出", value: "-"},
    {text: "收入", value: "+"}
  ];

  beautify(string: string) {
    if (dayjs(string).isSame(new Date(), "day")) {
      return "今天";
    } else if (dayjs(string).isSame(dayjs().subtract(1, "day"), "day")) {
      return "昨天";
    } else if (dayjs(string).isSame(dayjs().subtract(2, "day"), "day")) {
      return "前天";
    } else if (dayjs(string).isSame(dayjs(), "year")) {
      return dayjs().format("M月D日");
    } else {
      return dayjs().format("YYYY年M月D日");
    }
  }

  groupedList() {
    const recordList = this.data;
    if (recordList.length === 0) {
      return;
    }
    const newList = clone(recordList).filter(r=>r.type===this.type).sort((a, b) => dayjs(b.createdAt).valueOf() - dayjs(a.createdAt).valueOf());
    type GroupedList = {title:string,total?:number,items:RecordItem[]}[]
    const groupedList:GroupedList = [{title: dayjs(recordList[0].createdAt).format("YYYY-MM-DD"), items: [newList[0]]}];
    for (let i = 1; i < newList.length; i++) {
      const current = newList[i];
      const last = groupedList[groupedList.length - 1];
      if (dayjs(last.title).isSame(dayjs(current.createdAt), "day")) {
        last.items.push(current);
      } else {
        groupedList.push({title: dayjs(current.createdAt).format("YYYY-MM-DD"), items: [current]});
      }
    }
    groupedList.map(group=>{
      group.total=group.items.reduce((sum,item)=>sum+item.amount,0)
    })
    return groupedList;
  }
}
</script>

<style lang="scss" scoped>
.title {
  padding: 8px 16px;
  line-height: 24px;
  display: flex;
  justify-content: space-between;
  align-content: center;
  background: #c4c4c4;
}

.record {
  background: white;
  padding: 8px 16px;
  line-height: 24px;
  display: flex;
  justify-content: space-between;
  align-content: center;
}

.notes {
  color: #999999;
  margin-right: auto;
  margin-left: 16px;
}

::v-deep {
  .type-tabs-item {
    background: white;

    &.selected {
      background: #c4c4c4;

      &::after {
        display: none;
      }
    }
  }

  .interval-tabs-item {
    height: 48px;
  }
}

</style>